<template>
<div class="zhonlan2">
  <span class="spans">
      <div class="konge"></div><button  class="topbuttom" @click="openDB" >新建目录</button>
      <!-- <button  class="topbuttom" @click="openDB2();readData()" >新建图库</button> -->
      <button  class="topbuttom" @click="readData();change3()" >开始</button>
      <!-- <button  class="topbuttom" @click="change3()" >自动</button> -->
      <br>
      </span>
   
   <div class="di1" v-for="(item2,id) in data" :key="id" >
   <div v-if="getids == '999999'?ifShow2:getids == id?ifShow2:!ifShow2">
      <input type="text" class="riqi" v-model="item2.time">
      <input type="text" class="didian" v-model="item2.where"> 
      <input type="text" class="biaoqian" v-model="item2.date"> 
      <input type="text" class="id" v-model="item2.id">
      <div class="shangchuan">上传--->
        <input type="file" class="file" :id="item2.id" @change="upload($event);oninput(item2.id)"  multiple>
        <!-- <button class="shanchu" style="display: inline-block;" @click="lock3(item2.id)">获取地址</button> -->
      </div>
      <div class="tupiankuan" >
         <img class="tupian" :src="fristurl[id]" alt="" >
      </div><br>
      <!-- <button  class="shanchu" @click="lock(item2.id)">计算长度-</button> -->
      <!-- <button  class="shanchu" @click="lock(item2.id)">包装-</button> -->
      <!-- <button  class="shanchu" @click="qinkon()">清空文件-</button> -->
      <button  class="shanchu" @click="lock(item2.id);newlist2();addData2();readData3(item2.id)">添加图片-</button>
      <button  class="shanchu" v-clickDown @click="lock(item2.id);readData3(item2.id);arr()" v-if="ifshow3 && (fristurl.length >= id)"></button>
      <button class="shanchu" @click="lock(item2.id);writedata(item2.id)" >修改目录-</button>
      <button class="shanchu" @click="deledata(item2.id);deledata3(item2.id);readData()" >删除图库-</button>
      <!-- <button class="shanchu" @click="deledata3(item2.id);readData()" >删除图册-</button> -->
      <button class="shanchu" @click="lock(item2.id);readData3(item2.id);arr();chance();getid(item2.id)">浏览全部--</button>
      <button class="shanchu" @click="chance();getid(999999)">取消浏览</button>
   </div></div>

   <div class="di3" >
      <input type="text" class="didian" v-model="chanshu.name"> 
      <input type="text" class="id" v-model.number="chanshu.Number"><br>
      <input type="text" class="riqi2" v-model="data2.time">
      <input type="text" class="didian" v-model="data2.where"> 
      <input type="text" class="biaoqian" v-model="data2.date"> 
      <input type="text" class="id" v-model.number="data2.id"> 
      <button  class="fuanjian" @click="clean()">清除输入框-</button>
      <button  class="fuanjian" @click="lock2();addData();openDB2();readData()" >添加数据</button>
   </div>
   
   <div v-if="ifShow">
    <li class="tp" v-for="(item3,id) in list" :key="'tp-'+id"> 
        <img class="tp2" id="src1" :src="item3.url" @click="guanbi">
        <button class="tpshanchu" @click="deledata2(item3.id)">删除</button>
    </li>
    
    <!-- <li class="tp3" v-for="(item3,id) in list" :key="'tp3-'+id" > 
        <div class="tp3" v-if="ifguanbi">
        <img class="tp4" :src="item3.url" >
        <button class="guanbi" @click="guanbi">关闭</button>
        </div>
    </li> -->
    </div>
  <div>  
</div>   
</div>
</template>

<script>
export default {
   name:'myBody2',
     data(){
      return{
         data:[{
            id:0,
          time:'今天也要',
          where:'开始了',
          date:"吗~~"
}],data2:{
          id:1,
          time: '',
          where:'',
          date:''
},
       list:[],
       lists:[],
       lis:{ id:0,url:'' },
       lists2:{
          url:[]
       },
       liste:[],
       liste2:[],
       db:null,
       chanshu:{
          name:'',
          Number:'',
          biaoname:'',
       },
       T: 0,
       length:0,
       ifShow:false,
       ifShow2:true,
       ifshow3:false,
       getids:'999999',
       changes:'',
       ifguanbi:false,
       fristurl:['','','','','','','','','','','','','',''],
       sfristurl:['','','','','','','','','','','','','',''],
       showfri:'',
       listsss:[],
       filename:[],
       filess:[],
       urless:'	http://localhost:8886/'
      }
   },
  directives: {
            clickDown: {
                inserted(el) {
                        el.click()
                }
            }
   },
   methods:{
    getImgUrl(i){
             var fname = document.getElementById("src1")
             console.log(22222222)
             console.log(fname)
             var pjie = `${this.urless}${i}`
             fname.src = pjie
        },
    guilin(){
            this.chanshu.name = -1
          },
    qinkon(){
             document.getElementById("uploadForm")&&document.getElementById("uploadForm").reset();//清除input
          },
    change3(){
             this.ifshow3 = !this.ifshow3
          },
    guanbi(){
            this.ifguanbi = !this.ifguanbi
            console.log(this.ifguanbi)
          },
    getdate() {
		      var date = new Date();
		      var seperator1 = "-";
		      var year = date.getFullYear();
		      var month = date.getMonth() + 1;
		      var strDate = date.getDate();
		
		      if (month >= 1 && month <= 9) {
		        	month = "0" + month;
		      }
		      if (strDate >= 0 && strDate <= 9) {
		      	  strDate = "0" + strDate;
		      }
		      var currentdate = year + " - " + month + " - " + strDate + " - ";
		      return currentdate;
	        },
    getid(id){
           this.getids = id
           console.log(this.getids)
          },
    arr(){
              this.fristurl.push('')
          },
    lock(id){
             this.chanshu.name = id
          },
    lock2(){
             this.chanshu.name = this.data2.id
          },     
    newlist(){
            console.log(this.list)
            for(let i=0; i<this.list.length; i++){
              var listr = {id:i, url:''}
              listr.url = this.list[0]
              this.lists.push(listr)
              this.list = []
            }
          },
    newlist2(){
      console.log(22222)
            for(let i = this.length; i<(this.liste.length + this.length); i++){
              var listr = {id:i, url:'',url2:''}
              listr.url = this.liste[i-this.length]
              listr.url2 = this.liste2[i-this.length]
              this.lists.push(listr)
              console.log(listr)
              console.log(this.lists)
              console.log(22222)
            }
            this.liste = []
            this.liste2 = []
          },
    clean(){
             this.data2.date = this.data2.time = this.data2.where = ''
          },
    chance(){
           this.ifShow = !this.ifShow
          },
    chance2(){
           this.ifShow2 = !this.ifShow2
          },
    oninput(id){
      this.liste = []
      console.log(444444)
      console.log(this.liste)
       var sss = document.getElementById(id).files
       console.log(sss)
       this.filess = document.getElementById(id).files
       console.log(this.filess)
           for(let i = 0;i<this.filess.length;i++){
            console.log(333333)
             navigator.clipboard.readText().then((v) => {
         console.log("获取剪贴板成功：", v);
         var lujin = v
         console.log(lujin.substring(3))  
         lujin = `${lujin.substring(3)}\\${this.filess[i].name}`
         console.log(lujin)
         this.liste.push(lujin)
  }) 
          }
    },
    upload(e){
            console.log(e)
            console.log(66666666)
            var _this = this;
            for(let item of e.target.files){ 
            
            const imgUrl = URL.createObjectURL(item)
            console.log(888888888)
            const imgEle = document.createElement('img')
            imgEle.src = imgUrl
            imgEle.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = imgEle.width
            canvas.height = imgEle.height
            ctx.drawImage(imgEle, 0, 0)
            const data = canvas.toDataURL('image/jpeg', 0.5)
            _this.liste2.push(data)     
        }
         }
         console.log(_this.liste2)
         console.log(888888888)
         
         if(_this.liste2){
          _this.readData2()
         }
},
    writedata(id){
          var newdata = this.data[id]
          const name = 'mulu'
       var db
       var request = indexedDB.open(name,1);
     request.onsuccess=function (ev) {
       db=ev.target.result;
       dele(newdata);
};
function dele(newdata) { 
   console.log(newdata)
    var request = db.transaction(['basedata'], 'readwrite').objectStore('basedata');
        request =request.put(newdata);
      request.onsuccess = function (event) {
        console.log('数据修改成功');
        console.log(event.target.result)
    };    
      request.onerror = function (event) {
        console.log('数据修改失败');
    }       
  }
},
    openDB(){
                 const customerData = this.data2
                 var db
                 var request = indexedDB.open('mulu',1);
                 request.onsuccess = function(event) {
                 var db = event.target.result;
  };
  request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("basedata", {  keyPath: "id", autoIncrement: true});
    objectStore.transaction.oncomplete = function(event) {
      var customerObjectStore = db.transaction("basedata", "readwrite").objectStore("basedata")
      
      console.log(customerObjectStore)
    };
  };
},
    openDB2(){
                 const name = this.chanshu.name
                 const customerData = this.lists
                 this.lists = []
                 var db
                 var request = indexedDB.open(name,1);
                 request.onsuccess = function(event) {
                 var db = event.target.result;
  };
  request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("basedata", {  keyPath: "id", autoIncrement: true});
    objectStore.transaction.oncomplete = function(event) {
      var customerObjectStore = db.transaction("basedata", "readwrite").objectStore("basedata");
      customerData.forEach(function(customer) {
        customerObjectStore.add(customer);
      });
    };
  };
},             
   addData(){
      var customerData = this.data2
      var db
      var request = indexedDB.open('mulu',1);
    request.onsuccess=function (ev) {
     db=ev.target.result;
     add();
};
function add() {
    var request = db.transaction('basedata', 'readwrite').objectStore('basedata')
        .add(customerData);
      request.onsuccess = function (event) {
        console.log('数据写入成功');
    };
      request.onerror = function (event) {
        console.log('数据写入失败');
    }
}
},
   addData2(){
      var customerData = this.lists
      this.lists = []
      var name = this.chanshu.name
      console.log(name)
      var db
      var request = indexedDB.open(name,1);
    request.onsuccess=function (ev) {
     db=ev.target.result;
     add();
};
function add() {
    var request = db.transaction('basedata', 'readwrite').objectStore('basedata');
        customerData.forEach(function(customerData) {
        request.add(customerData);
      });
      request.onsuccess = function (event) {
        console.log('数据写入成功');
    };
      request.onerror = function (event) {
        console.log('数据写入失败');
    }
}
},
   readData(){
       var name = "mulu"
       var _this = this
       var db       
       var request = indexedDB.open(name,1);
     request.onsuccess=function (ev) {
       db=ev.target.result;
       read();
};
function read() { 
    var request = db.transaction(['basedata'], 'readwrite').objectStore('basedata');
        request =request.getAll();
      request.onsuccess = function (event) {
        console.log('数据读取成功');
       _this.data2.id = event.target.result.length
       _this.data = event.target.result
        // console.log(_this.data)
    };    
      request.onerror = function (event) {
        console.log('数据读取失败');
    }    
  }    
}, 
   readData2(){
       var name = this.chanshu.name
      //  console.log(name)
       this.length = 0
       var _this = this
       var db       
       var request = indexedDB.open(name,1);
     request.onsuccess=function (ev) {
       db=ev.target.result;
       read();
};
function read() { 
    var request = db.transaction(['basedata'], 'readwrite').objectStore('basedata');
        request =request.getAll();
      request.onsuccess = function (event) {
        console.log('数据读取成功');
        _this.length = event.target.result.length
        console.log(_this.length)
    };    
      request.onerror = function (event) {
        console.log('数据读取失败');
    }    
  }    
},
readData3(id){
  if(this.data[0].time !== ''){
       var name = this.chanshu.name
       this.length = 0
       this.ifShow = false
       var _this = this
       var db
       
       var request = indexedDB.open(name,1);        
       request.onsuccess=function (ev) {
       db=ev.target.result;
       read(id);
};
  }
function read(id) { 
    var request = db.transaction(['basedata'], 'readwrite').objectStore('basedata');
        request =request.getAll();
      request.onsuccess = function (event) {
        console.log('数据读取成功');
        _this.list = event.target.result
        for(let i = 0;i<_this.list.length;i++){
          _this.list[i].url = `${_this.urless}${_this.list[i].url}`
        }
        console.log(_this.list)
        _this.fristurl.splice(id,1,_this.list[0].url2)              
        console.log(_this.fristurl)
        console.log(55555)
    };    
      request.onerror = function (event) {
        console.log('数据读取失败');
    }    
  }   
},
 
   deledata(id){
      this.data2.id -= 1
      this.data.splice(id,1)
       var db;
       var request = indexedDB.open('mulu',1);
     request.onsuccess=function (ev) {
       db=ev.target.result;
       dele(id);
};
function dele(id) { 
   console.log(id)
    var request = db.transaction(['basedata'], 'readwrite').objectStore('basedata');
        request =request.delete(id);
      request.onsuccess = function (event) {
        console.log('数据删除成功');
        console.log(event.target.result)
    };    
      request.onerror = function (event) {
        console.log('数据删除失败');
    }    
  }    
}, 
   deledata2(id){
      this.list.splice(id,1)
      console.log(this.list)
       var db
       const dbName = this.chanshu.name
       var request = indexedDB.open(dbName,1);
     request.onsuccess=function (ev) {
       db=ev.target.result;
       dele(id);
};
function dele(id) { 
   console.log(id)
    var request = db.transaction(['basedata'], 'readwrite').objectStore('basedata');
        request =request.delete(id);
      request.onsuccess = function (event) {
        console.log('数据删除成功');
        // _this.data2.id = event.target.result.length
        console.log(event.target.result)
    };    
      request.onerror = function (event) {
        console.log('数据删除失败');
    }    
  }    
},
    deledata3(id){
       var db
       const dbName = this.chanshu.name
        indexedDB.deleteDatabase(dbName,1);

   
},
 },
   }
</script>

<style scoped>
.beikuan{
   width: 100%;
   height: 100%;
   background-color: black;
}
.zhonlan2{
   position: absolute;
   z-index: 10;
   margin-right: 50px;
   top: 100px;
   left: 320px;
   width: auto;
   height: auto;
   border-radius: 20px;
   background-image: linear-gradient( 135deg, #69FF97 10%, #00E4FF 100%);
  }
  .zhonlan2:hover{
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);
  }
 .di1{
   display: inline-block;
   margin-top: 10px;
   margin-left: 24px;
   width: 380px;
   height: 300px;
 }
 .di3{
   display: inline-block;
   margin-top: 10px;
   margin-left: 20px;
   width: 380px;
   height: px;
 }
 .riqi{
   text-align: center;
   font: italic 700 18px 微软雅黑;
   border: 0;
   padding-top: 1px;
   width: 140px;
   height: 30px;
   border-top-left-radius: 10px;
   box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
   /* background-color:azure; */
 }
 .riqi2{
   text-align: center;
   font: italic 700 17px 微软雅黑;
   border: 0;
   padding-top: 1px;
   width: 140px;
   height: 30px;
   /* border-top-left-radius: 10px; */
   box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
   /* background-color:azure; */
 }
 .didian{
   text-align: center;
   font: italic 700 20px 微软雅黑;
   border: 0;
   width: 105px;
   height: 30px;
   /* border-radius: 10px; */
   box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.5);
   /* background-color: rgba(243, 242, 247, 0.8); */
 }
 .biaoqian{
   text-align: center;
   font: italic 700 20px 微软雅黑;
   border: 0;
   width: 105px;
   height: 30px;
   /* border-radius: 10px; */
   box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.5);
   /* background-color: rgba(243, 242, 247, 0.8); */
 }
 .id{
   text-align: center;
   font: italic 700 20px 微软雅黑;
   border: 0;
   width: 30px;
   height: 30px;
   border-top-right-radius: 10px;
   box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
   background-color:rgba(67, 202, 207, 0.8);
 }
 .tp{
   /* position: absolute; */
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   margin-top: 20px;
   margin-left: 20px;
   width: 95%;
   height: px;
   background-color: azure;
 }
 .tp2{
  vertical-align: middle;
   text-align: center;
   margin: 0 auto;
  width: 100%;
  height: 100%;
 }
 .tp3{
  position: absolute;
  /* z-index: -1; */
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   width: 100%;
   height: px;
   background-color: azure;
 }
 .tp4{
  vertical-align: middle;
   text-align: center;
   margin: 0 auto;
  width: 100%;
  height: 100%;
 }
 .guanbi{
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  width: 30px;
  height: 15px;
 }
 .guanbi:hover{
  background-color: brown;
 }
 .tupiankuan{
   float: left;
   width: 380px;
 }
 .tupian{
  width: 100%;
 }
 .shangchuan{
   display: inline-block;
   width: 350px;
   height: 24px;
   opacity: 0;
   color: #999ff4;
   font: italic 700 15px 微软雅黑;
 }
 .di1:hover .shangchuan{
  opacity: 1;
 }
 .file{
  width: 200px;
 }
 .file,.shanchu,.shanchu2,.fuanjian,.topbuttom,.di3 input{
  opacity: 0;
 }
 .fuanjian{
   border-radius: 20%;
 }
 .fuanjian:hover{
   background-color: #67e9f8;
 }
  .shanchu{
   border-radius: 20%;
 }
 .tpshanchu{
   border-radius: 20%;
 }
 .shanchu:hover{
   background-color: #67e9f8;
 }
 .topbuttom:hover{
   background-color:brown;
 }
 .di1:hover .shanchu{
  opacity: 1;
 }
 .di3:hover .fuanjian{
  opacity: 1;
 }
 .spans:hover .topbuttom{
  opacity: 1;
 }
 .di3:hover input{
  opacity: 1;
 }
 .anjing{
   display: block;
 }
 .topbuttom{
  border-radius: 20%;
  display: inline-block;
 }
 button {
    border:10pc;
    color: rgb(54, 171, 171);
    background-color: azure;
 }
 .konge{
  display: inline-block;
  width: 10px;
  height: 5px;
 }
</style>